<template>
  <div>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="文本复制">
        文本复制示例，用于常规订单号，编号，快速复制等场景
      </a-card>
    </div>
    <a-card
      :bordered="false"
      title="基本信息"
      class="mt-3 proCard"
      size="small"
      :segmented="{ content: 'hard' }"
    >
      <a-descriptions :data="data" title="收款信息" layout="inline-horizontal" />
      <a-space>
        <a-button type="primary" @click="handleAccountCopy">复制付款账户</a-button>
        <a-button type="primary" status="success" @click="handleMoneyCopy">复制转账金额</a-button>
      </a-space>
      <!-- <a-descriptions label-placement="left" class="py-2">
        <a-descriptions-item>
          <template #label>收款人姓名</template>
          啊俊
        </a-descriptions-item>
        <a-descriptions-item label="收款账户">NaiveUiAdmin@qq.com</a-descriptions-item>
        <a-descriptions-item label="付款类型">支付宝</a-descriptions-item>
        <a-descriptions-item label="付款账户">
          {{ account }}
          <a-button type="primary" @click="handleAccountCopy">复制</a-button>
        </a-descriptions-item>
        <a-descriptions-item label="转账金额">
          <a-space>
            <a-input v-model:value="money" placeholder="输入金额，试试" />
            <a-button type="primary" @click="handleMoneyCopy">复制</a-button>
          </a-space>
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag type="success"> 已到账</a-tag>
        </a-descriptions-item>
      </a-descriptions> -->
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { useCopyToClipboard } from '@/hooks/web/useCopyToClipboard';
  import { Message } from '@arco-design/web-vue';

  const { clipboardRef, copiedRef } = useCopyToClipboard();

  const account = ref('NaiveUiAdmin@163.com');
  const money = ref('12.00');

  const data = [
    {
      label: '收款人姓名',
      value: '啊俊',
    },
    {
      label: '收款账户',
      value: 'NaiveUiAdmin@qq.com',
    },
    {
      label: '付款类型',
      value: '支付宝',
    },
    {
      label: '付款账户',
      value: 'NaiveUiAdmin@163.com',
    },
    {
      label: '转账金额',
      value: '12.00',
    },
    {
      label: '状态',
      value: '已到账',
    },
  ];

  function handleAccountCopy() {
    const value = unref(account.value);
    clipboardRef.value = value;
    if (unref(copiedRef)) {
      Message.success(`拷贝成功：${value}`);
    }
  }

  function handleMoneyCopy() {
    const value = unref(money.value);
    if (!value) {
      Message.warning('请输入要复制的内容！');
      return;
    }
    clipboardRef.value = value;
    if (unref(copiedRef)) {
      Message.success(`拷贝成功：${value}`);
    }
  }
</script>
